<template>
  <div>
    <div id="middle-container">
      <div />
    </div>
    <div class="middle-container_body" style="margin-top:10px;height:calc(45vh - 100px)">
      <!-- <dv-border-box-12> -->
      <div class="leftContainer_second">
        <div class="middle-container_top_title">
          <div style="flex:1.5">
            <dv-border-box-12>
              <div class="numberBg">
                <div class="numberBg_title">
                  多跨场景一本帐项目数量
                </div>
                <div class="numberBg_number" @click="goto(1)">
                  <scrollerNumber :data-number="20" :timer="20000" :font-color="color" :border-color="borderColor" />
                  <!-- <span style="color:#2383f5" class="numberBg_number_span">15</span> -->
                  <span style="margin-left:10px;padding-top: 20px;">个</span>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div style="flex:2;margin:0px 5px">
            <dv-border-box-12>
              <div class="numberBg">
                <div class="numberBg">
                  <div class="numberBg_title">
                    最佳应用项目数量
                  </div>
                  <div class="numberBg_number">
                    <scrollerNumber :timer="35000" :data-number="10" :font-color="color1" :border-color="borderColor1" />
                    <!-- <span style="color:#2383f5" class="numberBg_number_span">15</span> -->
                    <span style="margin-left:10px;padding-top: 20px;">个</span>
                    <!-- <span style="color:#cd3a3a" class="numberBg_number_span">12</span>
                    <span>个</span> -->
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div style="flex:1.5">
            <dv-border-box-12>
              <div class="numberBg" @click="goto(2)">
                <div class="numberBg_title">
                  应用上线项目数量
                </div>
                <div class="numberBg_number">
                  <scrollerNumber :timer="25000" :data-number="15" :font-color="color2" :border-color="borderColor2" />
                  <!-- <span style="color:#2383f5" class="numberBg_number_span">15</span> -->
                  <span style="margin-left:10px;padding-top: 20px;">个</span>
                  <!-- <span style="color:#26e7fe" class="numberBg_number_span">12</span>
                  <span>个</span> -->
                </div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
        <div class="leftContainer_second_body">
          <dv-border-box-12>
            <showTable />
          </dv-border-box-12>
        </div>
        <div class="leftContainer_second_body">
          <dv-border-box-12>
            <scrollBoard :config="config" />
          </dv-border-box-12>
        </div>
        <div class="leftContainer_second_body">
          <dv-border-box-12>
            <div style="height:calc(37vh - 88px );background: #0d284c85;padding:5px">
              <dryingTable />
            </div>
          </dv-border-box-12>
        </div>
      </div>
      <!-- </dv-border-box-12> -->
    </div>
  </div>
</template>
<script>
import showTable from './showTable.vue';
import scrollBoard from './scrollBoard';
import dryingTable from './dryingTable';
import scrollerNumber from './scrollerNumber';

export default {
  components: {
    showTable,
    scrollBoard,
    dryingTable,
    scrollerNumber
  },
  data() {
    return {
      color: '#2383f5',
      color1: '#cd3a3a',
      color2: '#26e7fe',
      borderColor2: '1px solid #26e7fe ',
      borderColor1: '1px solid #26e7fe',
      borderColor: '1px solid #26e7fe',
      config: {
        header: ['最佳应用项目名称', '牵头领导', '承办单位', '所属领域', '项目进度', '申报时间'],
        data: [
          ['惠企政策智兑平台', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['枫桥式 社会智治中枢', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['枫桥式 社会智治中枢', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['惠企政策智兑平台', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['枫桥式 社会智治中枢', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['惠企政策智兑平台', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['枫桥式 社会智治中枢', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月'],
          ['枫桥式 社会智治中枢', '盛阅春', '市政务服务办', '数字政府', '建设中', '2021年6月']
        ],
        columnWidth: [200, 100, 110, 120, 120],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 35,
        oddRowBGC: '#0b2040c2',
        evenRowBGC: '#0b2040c2'

      }
    };
  },
  mounted() {

  },
  created() {
    var count = 0;
    setInterval(() => {
      count++;
      this.config1 = {
        number: [5 + count],
        content: '{nt}',
        animationCurve: 'Transition'
      };
    }, 30000);
    //  config1: {
    //     number: [120],
    //     content: '{nt}'
    //   },
  },
  methods: {
    goto(type) {
      let params = '';
      if (type === 1) {
        params = {
          path: '/frqox/frqox/ulitz',
          query: {
            title: '多跨场景一本账',
            isHideLeft: 1,
            isHideTop: 1
          }

        };
      } else if (type === 2) {
        params = {
          path: '/frqox/frqox/ykloo',
          query: {
            title: '上线应用项目',
            isHideLeft: 1,
            isHideTop: 1
          }

        };
      }
      const routeUrl = this.$router.resolve(params);
      const tempwindow = window.open('_blank'); // 先打开页面
      tempwindow.location = routeUrl.href; // 后更改页面地址
    }

  }
};
</script>

<style scoped lang='scss' >
 .middle-container_body /deep/ .dv-border-box-12 .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
  }
   .middle-container_top_title{
     font-size: 17px;
     font-weight: bolder;
     margin-bottom: 5px;
     margin-left: 10px;
     display: flex;
     height: calc(15vh);
    color: #ced1da;
   }
   .leftContainer_second_body{
      margin-top: 0px;
      padding: 5px;
   }

   .leftContainer_second_body /deep/  #scroll-board {
      box-sizing: border-box;
      height: 100%;
      overflow: hidden;
      width: 100% !important
    }
    .numberBg{
      height: 100%;
      background: #0d284c85;
      border-radius: 5px;
    }
    .numberBg_title{
      text-align: center;
      padding-top: 10px;
      font-weight: normal;
      font-size: 18px;
    }
    .numberBg_number{
      margin-top: 10px;
      text-align: center;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .numberBg_number_span{
      font-size: 2.5rem;
      font-weight: bolder;
      display: inline-block;
      color: rgb(35, 131, 245);
      width: 80px;
      border-bottom: 1px solid #1399d2;
      text-align: center;
      line-height: 100%
    }

</style>
